// 引入配置
@import "./_mixin.scss";
@import "./reset.scss";
@import "./_alert.scss";
@import "common.scss";

// 设计稿为750px 

// @function pxd2($px){
// 	@return $px / 2 * 1px;
// }

// @function px2vw($px){
// 	@return $px/7.5*1vw;
// }

//定义工具函数

// 640px=100vw 设计稿尺寸
//1px = 100/640 vw/px

// 750px=100vw 设计稿尺寸
// 1px = 100/750 vw/px
@function px2vw($px){
	@return $px * 100/750 * 1vw;
}
// 假设640设计稿,html的font-size为64,则
// 64px = 1rem
// 1px = 1/64 rem/px
//注意:这里的64记得同步到rem.js文件中
// 假设750设计稿,html的font-size为100,则
// 100px = 1rem
// 1px = 1 / 100 rem/px
// 注意:这里的100记得同步到rem.js文件中
@function px2rem($px){
	@return $px * 1/100 * 1rem;
}
// 直接除以2
@function pxd2($px){
	@return $px / 2 * 1px;
}


*{
	margin: 0;
	padding: 0;
}
.main{
	width: 100vw;
	height: 100vh;
	background: url(../images/bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}
.logo{
	width: px2vw(222);
	height: px2vw(194);
	margin-left: auto;
	margin-right: auto;
	margin-top: px2vw(140);
	img{
		display: block;
		width: 100%;
		height: 100%;
	}
}
.logoin{
	margin-top: px2vw(150);
	width: px2vw(600);
	margin-left: auto;
	margin-right: auto;
}
.item{
	height: px2vw(75);
	width: 100%;
	margin-top: px2vw(60);
	line-height: px2vw(75);
	background: url(../images/txt.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	&:nth-of-type(2){
		margin-top: 0;
	}
}
// 提示框
.notice{
	font-size: 0.3rem;
	height: px2vw(75);
	width: 100%;
	// text-align: center;
	line-height: px2vw(75);
	color: #e22b30;
	background-color: #ccc;
	border-radius: px2vw(75);
	padding-left: px2vw(30);
	visibility: hidden;
}

.item_txt{
	// padding-left: px2vw(30);
	position: absolute;
	left: 3.33vw;
	top: -3.4vw;
}
.item span{
	font-size: 0.3rem;
}
input{
	font-size: 0.4rem;
	outline: none;
	width: px2vw(360);
	border: none;
	background-color: transparent;
}
.buttons{
	height: px2vw(75);
	width: px2vw(550);
	margin-left: auto;
	margin-right: auto;
	margin-top: px2vw(60);
	display: flex;
	justify-content: space-between;
}
.buttons>button{
	display: inline-block;
	height: px2vw(75);
	width: px2vw(200);
	border-radius: px2vw(40);
	font-size: .3rem;
	color: #0075c1;
	outline: none;
	border: none;
	cursor: pointer;
	text-align: center;
	line-height: px2vw(75);
	background-color: #fff;
}

// 我的预约
.myCont{
	width: 100vw;
	height: 100vh;
	background: url(../images/bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.myTitle{
	margin-top: px2vw(215);
	margin-left: px2vw(96);
	margin-bottom: 15vw;
	h3{
		font-size: .3rem;
		color: #0075c1;
	}
}

// <!-- 预约内容 -->
.myPeople{
	width: px2vw(590);
	height: px2vw(380);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.3);
	margin-left: px2vw(80);
	box-sizing: border-box;
	font-size: 0.4rem;
	padding: 6vw 0;
	p{
		
		// border-bottom: 1px dashed #ccc;
	}
	.myname{
	}
}

.myPeople div{
	width: 100%;
}
// 滚动的样式
.scroll{
	height: 100vw;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}
.scroll>.myPeople{
	height: auto;
	margin-bottom: 2vw;
}
// 隐藏滚动条
::-webkit-scrollbar{
	display: none;
}
// 返回首页的btn
.myCont a{
	display: block;
	height: px2vw(75);
	width: px2vw(200);
	border-radius: px2vw(40);
	font-size: .3rem;
	color: #0075c1;
	outline: none;
	border: none;
	cursor: pointer;
	text-align: center;
	line-height: px2vw(75);
	background-color: #fff;
	margin: 5vw auto;
}

// 可以预约的场次
.yuyuetime{
	margin-left: px2vw(80);
	margin-top: px2vw(170);
	width: px2vw(590);
	height: px2vw(839);
	border-radius: 10px;
	// background-color: #fff;
	box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.data_times{
	margin-top: px2vw(69);
	margin-left: px2vw(52);
	display: flex;
	width: 63%;
	justify-content: space-between;
	p{
		font-size: 0.4rem;
		color: #0075c1;
	}
	.sanjiao{
		margin-top: px2vw(20);
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 8px solid #0075c1;
	}
}

// <!-- 场次，状态 -->
.condition{
	height: px2vw(40);
	width: 60%;
	display: flex;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	margin-top: px2vw(80);
	span{
		height: px2vw(40);
		line-height: px2vw(40);
		font-size: 0.4rem;
		color: #0075c1;
	}
}

// <!-- 时间的状态内容 -->
.data_item{
	height: px2vw(40);
	width: 100%;
	display: flex;
	margin-top: px2vw(90);
	justify-content: center;
	align-items: center;
	span{
		width: 50%;
		height: px2vw(40);
		line-height: px2vw(40);
		font-size: 0.4rem;
		// color: #ccc;
		text-align: center;
	}
	.item_yuyue{
		width: 50%;
		height: px2vw(40);
		line-height: px2vw(40);
		font-size: 0.4rem;
		// color: #ccc;
		text-align: center;
	}
}

// <!-- 最下面的文字说明 -->
.data_txt{
	text-align: center;
	margin-top: px2vw(100);
	p{
		font-size: 0.3rem;
		span{
			padding-right: 5px;
		}
	}
}

.alert_wrapper{
	// margin: px2vw(378) auto;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: px2vw(590);
	height: px2vw(380);
	border-radius: 10px;
	text-align: center;
	font-size: 0.3rem;
	background-color: rgba(255,255,255,.8);
	display: none;
}

// 弹窗的确定取消按钮
.alert_content{
	width: 100%;
	min-height: 28vw;
	// background-color: red;
	padding: 10vw 0 0 0;
}
.alert_btn{
	border-top: 1px solid #333;
	padding-top: 5vw;
	width: 50%;
}
// 
.alert_btn_confirm{
	color: #0075c1;
}

// 身份证显示页面
.bg{
	width: 100vw;
	height: 100vh;
	background: url(../images/bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.identity{
	margin-left: px2vw(80);
	margin-top: px2vw(170);
	width: px2vw(590);
	height: px2vw(839);
	border-radius: 10px;
	// background-color: #fff;
	box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	.input_name{
		margin-left: px2vw(20);
		margin-top: px2vw(60);
		font-size: 0.4rem;
		border-bottom: 2px solid;
		width: 40%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		span{
			// border-bottom: 2px solid;
			font-size: 0.4rem;
			// width: 10vw;
			// height: px2vw(20);
			// padding-left: 25vw;
		}
	}
	.p_txt{
		padding: 0 10px 0 10px;
		margin-top: px2vw(70);
		font-size: 0.28rem;
		p{
			line-height: px2vw(45);
		}
	}
	// <!-- 图片上传 -->
	.photo{
		width: px2vw(265);
		height: px2vw(265);
		border: 2px solid #434242;
		margin: px2vw(60) auto;
		font-size: 0;
	}
}

// <!-- 保存图片 -->
.save_btn{
	width: px2vw(187);
	height: px2vw(57);
	background-color: #fff;
	border-radius: px2vw(28);
	// display: flex;
	font-size: 0;
	line-height: px2vw(57);
	text-align: center;
	margin: 0 auto;
	a{
		color: #0075c1;
		font-size: 0.3rem;
	}
}
// 
.p_txt2{
	padding: 0 10px 0 10px;
	margin-top: px2vw(20);
	font-size: 0.28rem;
	p{
		line-height: px2vw(45);
		color: #434242;
	}
}

// 记录的内容
.record{
	// margin-left: px2vw(80);
	// margin-top: px2vw(170);
	margin: px2vw(378) auto;
	width: px2vw(590);
	height: px2vw(380);
	border-radius: 10px;
	// background-color: #fff;
	box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.3);
	text-align: center;
	font-size: 0.3rem;
	line-height: px2vw(380);
}

